<template>
  <div>
    <div class="myCollectionPage">
      <div class="header">
        <span class="backIcon" @click="goBack">←</span>
        <span class="title" style="margin-right: 150px">我的收藏</span>
      </div>
      <div class="tabBarWrapper">
        <div class="tabBar">
          <button :class="{active: activeTab === 'health'}" @click="activeTab = 'health'">
            健康头条
          </button>
          <button :class="{active: activeTab === 'care'}" @click="handleCareTabClick">
            慢病护理
          </button>
          <button :class="{active: activeTab === 'drug'}" @click="handleDrugTabClick">
            药品
          </button>
        </div>
      </div>
    </div>
    <div v-if="activeTab === 'health'" class="article-list-container">
      <div
          v-for="item in healthArticles"
          :key="item.id"
          class="article-item"
          @click="goToDetails(item)"
      >
        <div class="article-content-wrapper">
          <div class="article-title">
            <span class="article-title-text">{{ item.title }}</span>
          </div>
          <div class="article-text">
            <p :class="{ 'ellipsis - text': item.content.length > maxChars }">
              {{ getDisplayContent(item.content) }}
            </p>
          </div>
        </div>
        <div class="article-image">
          <div class="article-image-block">
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.YhdOuoXmIUGUBSRSDLGXrwHaHa?rs=1&pid=ImgDetMain" alt="文章图片" />
          </div>
        </div>
      </div>
      <div v-if="healthArticles.length === 0" class="noMore">没有更多了</div>
    </div>
    <div v-if="activeTab === 'care'" class="contentWrapper">
      <div class="article-list-container">
        <div
            v-for="lentivirus in lentivirusArticles"
            :key="lentivirus.id"
            class="article-item"
            @click="goToLentivirus(lentivirus)"
        >
          <div class="article-content-wrapper">
            <div class="article-title">
              <span class="article-title-text">{{ lentivirus.title }}</span>
            </div>
            <div class="article-text">
              <p :class="{ 'ellipsis - text': lentivirus.content.length > maxChars }">
                {{ getDisplayContent(lentivirus.content) }}
              </p>
            </div>
          </div>
          <div class="article-image">
            <div class="article-image-block">
              <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.YhdOuoXmIUGUBSRSDLGXrwHaHa?rs=1&pid=ImgDetMain" alt="文章图片" />
            </div>
          </div>
        </div>
        <div v-if="healthArticles.length === 0" class="noMore">没有更多了</div>
      </div>
    </div>
    <div v-if="activeTab === 'drug'" class="contentWrapper">
      <div class="article-list-container">
        <div v-for="pharmacy in pharmacyArticles" :key="pharmacy.id" class="article-item" @click="goToPharmacy(pharmacy)">
          <div class="article-content-wrapper">
            <div class="article-title">
              <span class="article-title-text">{{ pharmacy.drugName }} ({{ getAliasDisplay(pharmacy.alias) }})</span>
            </div>
            <div class="article-text">
              <p class="ellipsis-text">
                {{ getDisplayContent(pharmacy.drugFactory) }}
              </p>
            </div>
          </div>
          <div class="article-image">
            <div class="article-image-block">
              <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.YhdOuoXmIUGUBSRSDLGXrwHaHa?rs=1&pid=ImgDetMain" alt="文章图片" />
            </div>
          </div>
        </div>
        <div v-if="healthArticles.length === 0" class="noMore">没有更多了</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'health',
      maxChars: 29,
      healthArticles: [],
      lentivirusArticles: [],
      pharmacyArticles: []
    };
  },
  methods: {
    findMyDrugInfo() {
      this.axios.get('http://localhost:10086/api/user/user/findMyDrugInfo').then(res => {
        console.log(res);
        this.pharmacyArticles = res.data.data;
      }).catch(err => {
        console.log(err);
      });
    },
    getAliasDisplay(alias) {
      if (alias.length > 5) {
        return alias.slice(0, 5) + '...';
      }
      return alias;
    },
    findMyLentivirus() {
      this.axios.get('http://localhost:10086/api/user/user/findMyLentivirus').then(res => {
        console.log(res);
        this.lentivirusArticles = res.data.data;
      }).catch(err => {
        console.log(err);
      });
    },
    findMyHealthInfo() {
      this.axios.get('http://localhost:10086/api/user/user/findMyHealthInfo').then(res => {
        console.log(res);
        this.healthArticles = res.data.data;
      }).catch(err => {
        console.log(err);
      });
    },
    goToPharmacy(article) {
      this.$router.push({
        name: 'drugInfo',
        params: { id: article.id },
        query: { activeTab: this.activeTab }
      });
    },
    goToLentivirus(article) {
      this.$router.push({
        name: 'chronicNursing',
        params: { id: article.id },
        query: { activeTab: this.activeTab }
      });
    },
    goToDetails(item) {
      this.$router.push({
        name: 'healthDetails',
        params: { id: item.id },
        query: { activeTab: this.activeTab }
      });
    },
    getDisplayContent(content) {
      if (content.length > this.maxChars) {
        return content.slice(0, this.maxChars) + '...';
      }
      return content;
    },
    goBack() {
      const queryActiveTab = this.$route.query.activeTab;
      if (queryActiveTab) {
        this.activeTab = queryActiveTab;
      }
      this.$router.go(-1);
      console.log('返回上一页');
    },
    handleCareTabClick() {
      this.activeTab = 'care';

      this.findMyLentivirus();
    },
    handleDrugTabClick() {
      this.activeTab = 'drug';
      this.findMyDrugInfo();
    }
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({ name: 'login' });
      }, 666);
    }
    this.axios.defaults.headers.common['token'] = token;
    this.findMyHealthInfo();

    const queryActiveTab = this.$route.query.activeTab;
    if (queryActiveTab) {
      this.activeTab = queryActiveTab;
    }
  }
};
</script>

<style scoped>
/* 样式部分保持不变 */
.myCollectionPage {
  background-color: white;
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.backIcon {
  font-size: 20px;
  margin-right: 10px;
  cursor: pointer;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.tabBarWrapper {
  background-color: #F2F2F2;
  padding: 6px;
  border-radius: 11px;
  margin-bottom: 10px;
}

.tabBar {
  display: flex;
  justify-content: space-around;
}

.tabBar button {
  padding: 5px 30px;
  border: none;
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
  color: black; /* 未选中时字体黑色 */
  transition: background-color 0.3s, color 0.3s; /* 过渡效果 */
}

.tabBar button.active {
  background-color: white;
  color: #007AFF; /* 选中时字体蓝色 */
}

.contentWrapper {
  background-color: white;
  padding: 15px;
  border-radius: 5px;
}

.articleItem {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.articleItem h3 {
  margin-top: 0;
}

.noMore {
  text-align: center;
  color: #999;
}

.article-list-container {
  width: 80%;
  margin: 0 auto;
}

.article-item {
  display: flex;
  align-items: center;
  margin: 20px 0;
  padding: 20px;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
}

.article-content-wrapper {
  flex: 1;
}

.article-title {
  margin-bottom: 5px; /* 减少标题与下方文字的间距 */
}

.article-title-text {
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap; /* 让标题一行显示 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-text {
  overflow: hidden;
}

.article-text p {
  font-size: 12px;
  color: gray;
}

.ellipsis-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-image {
  width: 100px;
  height: 80px;
  margin-left: 20px;
}

.article-image-block {
  /* background-color: red; */
  width: 100%;
  height: 100%;
}

img {
  /* background-color: red; */
  width: 100%;
  height: 100%;
}
</style>